<template>
    <el-container>
       
            
            <el-main>
                <div class="manage">
                    <div class="manage-tob">
                        <p>我的客户
                            <!-- <div class="tob1"></div> -->
                        </p>
                        <p>下级客户</p>
                    </div>
                    <div class="manage-center">
                        <form action="" @keyup.enter="addTodo">
                            <input type="text" class="form-control" placeholder="客户名称" v-model="todoTitle" />
                            <input type="text" class="form-control" placeholder="手机号码" v-model="todoTitl" />
                        </form>
                    </div>
                    <el-table :data="tableData" style="width: 100%" max-height="300">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="date" label="客户名称" width="150">
                        </el-table-column>
                        <el-table-column prop="name" label="客户标签" width="200">
                        </el-table-column>
                        <el-table-column prop="province" label="手机号码" width="150">
                        </el-table-column>
                        <el-table-column prop="city" label="线索来源" width="120">
                        </el-table-column>
                        <el-table-column prop="address" label="意向车型" width="200">
                        </el-table-column>
                        <el-table-column prop="zip" label="跟进状态" width="120">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                                <div class="manage-bot">
                                    <div>编辑</div>
                                    <div>
                                        <el-button type="text" @click="open">转移</el-button>
                                    </div>
                                    <div>
                                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                                            size="small">
                                            移除
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                            layout=" prev, pager, next,sizes, jumper" :total="25">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
 
</template>
  
<script>
import { nanoid } from 'nanoid'
export default {
    methods: {
        dooo() {
            console.log(localStorage.getItem());
            
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        addTodo() {
            if (!this.todoTitle.trim()) return alert('请输入任务名称！');
            this.tableData.unshift({
                id: nanoid(),
                date: this.todoTitle,
                province: this.todoTitl
            })
            this.todoTitle = ''
            this.todoTitl = ''
        },
        handleSizeChange(val) {
            // this.pageSize=val;
            // this.getTabelInfo();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // this.page=val;
            // this.currentPage=val;
            // this.getTabelInfo();
            console.log(`当前页: ${val}`);
        },
        // deleteTodo(id) {
        //   if (confirm('是否删除该条数据？')) {
        //     this.todos = this.todos.filter(todo => todo.id != id)
        //   }
        // },
        open() {
            this.$prompt('转移给其他销售', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                // console.log(value);
                if (value == null) {
                    alert('请输入名字')
                } else {
                    this.$message({
                        type: 'success',
                        message: '已成功转移给: ' + value,
                    });
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        }

    },
    data() {
        return {
            currentPage: 0,
            total: 0,//总条数
            page: 1,//初始显示第几页
            pageSize: 2,//每页显示多少数据
            dialogVisible: false,

            currentPage4: 4,
            todoTitle: '',
            todoTitl: '',
            tableData: [{
                date: '小明',
                name: '大客户',
                province: '1589695022',
                city: '线下导入',
                address: '宝马x100',
                zip: "预约试驾"
            },{
                date: '小明',
                name: '大客户',
                province: '1589695022',
                city: '线下导入',
                address: '宝马x100',
                zip: "预约试驾"
            }, 
           {
                date: '小明',
                name: '大客户',
                province: '1589695022',
                city: '线下导入',
                address: '宝马x100',
                zip: "预约试驾"
            }]
        }
    }
}
</script>
<style  scoped>
.manage-tob>p:nth-child(1){
    color: #409EFF;
   
    
}
.tob1{
  
  
        width:40px;
        height: 0;
        border: 1px solid #409EFF;
        
    }
.el-container {
    height: 100vh;
}




.el-main{
    line-height: 0px;
}


body>.el-container {
    margin-bottom: 40px;
}

.manage-tob {
    display: flex;
line-height: 20px;

}

.manage {
    background-color: #fff;
    padding: 15px;
}

.manage-tob>p {
    margin-left: 50px;
    margin-top: 20px;
}

.manage-center {
    text-align: left;
    margin: 30px 0;
    line-height: 40px;
}

.manage-center input {
    border: 0;
    outline: none;
    margin-left: 20px;
}

.manage-bot {
    display: flex;
    /* padding: 9px 15px; */
    /* font-size: 12px */
}

.manage-bot>div {
    margin: 0 5px;
    color: #409EFF;
    line-height: 50px;
}

.el-button--text {
    font-size: 14px;
}

.block {
    text-align: right;
    margin-top: 40px;
}
</style>